
<!DOCTYPE html>

<head>
    <meta charset="utf-8" />
    <title>AngularJS and HTML5 Audio</title>
    <base href="/">
    <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/google/code-prettify/master/styles/desert.css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="style.css">
    <script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.15/angular.js" data-semver="1.3.15"></script>
    <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
    <script src="audio.js"></script>
</head>
<html ng-app="angular-html5-audio">

<body ng-controller="MainCtrl">

<div class="songContainer">
    <div ng-repeat="song in songList">
        <span class="left" >{{song.title}}</span>
      <span class="right">
        <button ng-click="playAudio(song.filename)"><i class="fa fa-play-circle fa-lg"></i></button>
        <button ng-click="pauseAudio()"><i class="fa fa-pause fa-lg"></i></button>
        <button ng-click="stopAudio()"><i class="fa fa-stop fa-lg"></i></button>
      </span>
    </div>
</div>

<div id="mp3_player">
    <audio autoplay loop ng-src="{{songTitle}}"></audio>
    <canvas id="analyser_render"></canvas>
</div>
<div class="codeContainer">
    <pre class="prettyprint" style="color:lightgray">

  var app = angular.module('angular-html5-audio', []);

  app.controller('MainCtrl', function($scope, $sce, $rootScope) {

    if (!window.AudioContext) {
      if (!window.webkitAudioContext) {
        alert('You might be viewing this on your mobile. Unfortunately, AudioContext is not supported on this browser');
      }
      window.AudioContext = window.webkitAudioContext;
    }

    window.requestAnimFrame = function() {
      return (
        window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        function( /* function */ callback) {
          window.setTimeout(callback, 1000 / 60);
        }
      );
    }();

    // Audio controls
    $scope.playAudio = function(songTitle) {
      $scope.songTitle = $sce.trustAsResourceUrl(songTitle);
       $scope.myAudio.play();
    };

    $scope.pauseAudio = function() {
      $scope.myAudio.pause();
    };

    $scope.stopAudio = function() {
      $scope.myAudio.pause();
      $scope.myAudio.currentTime = 0;
    };

    $scope.initMp3Player = function() {
      $scope.myAudio = document.querySelector('audio');

      window.AudioContext = AudioContext || window.webkitAudioContext;
      $scope.context = new AudioContext();

      $scope.analyser = $scope.context.createAnalyser();
      $scope.source = $scope.context.createMediaElementSource($scope.myAudio);

      $scope.fbc_array = new Uint8Array($scope.analyser.frequencyBinCount);
      $scope.analyser.smoothingTimeConstant = 0.8;
      // $scope.analyser.fftSize = 512;

      $scope.canvas = document.getElementById('analyser_render');
      $scope.ctx = $scope.canvas.getContext('2d');
      $rootScope.$emit('startAudio', {
        message: 'start audio'
      });

    };

    $rootScope.$on('startAudio', function(event, args) {
      $scope.source.connect($scope.analyser);
      $scope.source.connect($scope.context.destination);
      $scope.analyser.connect($scope.context.destination);
      frameLooper();
    });

    function frameLooper() {
      requestAnimFrame(frameLooper);
      renderSpectrum();
    }

    function renderSpectrum() {
    $scope.analyser.getByteFrequencyData($scope.fbc_array);
    $scope.ctx.clearRect(0, 0, $scope.canvas.width, $scope.canvas.height); // Clear the canvas
    $scope.ctx.fillStyle = '#00CCFF'; // Color of the bars
    bars = 1024;
    for (var i = 0; i < bars; i++) {
      bar_x = i * 2;
      bar_width = 1;
      bar_height = -($scope.fbc_array[i] / 2);
      var spectrumColors = $scope.ctx.createLinearGradient(0, 0, 0, 200);
      spectrumColors.addColorStop(0, "black");
      spectrumColors.addColorStop(0.5, "#FFA000");
      spectrumColors.addColorStop(0.3, "yellow");
      spectrumColors.addColorStop(0.8, "red");
      spectrumColors.addColorStop(1, "white");
      $scope.ctx.fillStyle = spectrumColors;
      $scope.ctx.fillRect(bar_x, $scope.canvas.height, bar_width, bar_height);
    }
  }

  window.addEventListener('load', $scope.initMp3Player, false);

  });

    </pre>
</div>
</body>

</html>
